import React, { Component } from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import { Tab, Tabs, ScrollableTab, TabHeading } from 'native-base'
import ListCom from '../list/index'
import { Actions } from 'react-native-router-flux'
import commonStyle from '../../../../../libs/commonStyle'
import pxToDp, { deviceHeightDp } from '../../../../../libs/pxToDp'
import Iconfont from '../../../../../components/iconfont'
import { connect } from 'react-redux' // 引入connect函数
import * as articleAction from '../../../../../redux/actions/article'

class TabCom extends Component {
	componentDidMount() {
		this.props.getList()
		this.props.getCanuseDomain()
	}
	onSearch() {
		Actions.search()
	}
	// renderTab(name, page, isTabActive, onPressHandler, onLayoutHandler) {
	// 	return (
	// 		<TouchableOpacity
	// 			key={`${name}_${page}`}
	// 			onPress={() => onPressHandler(page)}
	// 			onLayout={onLayoutHandler}
	// 			style={[commonStyle.flexCenter, commonStyle.p10]}
	// 		>
	// 			<Text
	// 				style={[
	// 					isTabActive ? { color: '#C30D23' } : '',
	// 					page === this.props.list.length - 1
	// 						? commonStyle.mr80
	// 						: ''
	// 				]}
	// 			>
	// 				{name}
	// 			</Text>
	// 		</TouchableOpacity>
	// 	)
	// }
	render() {
		let { list } = this.props
		return (
			<View style={[commonStyle.posRelative]}>
				<Tabs
					style={{
						height: deviceHeightDp - pxToDp(260),
						overflow: 'hidden'
					}}
					transparent
					tabBarUnderlineStyle={{
						height: pxToDp(6),
						backgroundColor: '#C30D23'
					}}
					renderTabBar={() => (
						<ScrollableTab
							style={{
								height: pxToDp(100),
								backgroundColor: '#f8f8f8'
							}}
						/>
					)}
				>
					{list.map((item, index) => {
						return (
							!item.deleteFlag && (
								// <Tab
								// 	heading={item.name}
								// 	tabStyle={{
								// 		flex: 2,
								// 		padding: 0,
								// 		margin: 0,
								// 		// width: pxToDp(100),
								// 		backgroundColor: '#f8f8f8'
								// 	}}
								// 	textStyle={{
								// 		fontSize: pxToDp(10),
								// 		color: 'grey'
								// 	}}
								// 	activeTabStyle={{
								// 		// width: pxToDp(100),
								// 		backgroundColor: 'white'
								// 	}}
								// 	activeTextStyle={{ color: '#C30D23' }}
								// >
								// 	<ListCom curItem={item} />
								// </Tab>
								<Tab
									heading={
										<TabHeading
											style={[
												commonStyle.flexCenter,
												{
													backgroundColor: '#f8f8f8'
												}
											]}
										>
											<Text
												style={[
													commonStyle.f28,
													index === list.length - 1
														? commonStyle.mr80
														: ''
												]}
											>
												{item.name}
											</Text>
										</TabHeading>
									}
								>
									<ListCom
										// style={{
										// 	height: deviceHeightDp - 150
										// }}
										curItem={item}
									/>
								</Tab>
							)
						)
					})}
				</Tabs>
				<TouchableOpacity
					activeOpacity={1}
					style={[
						commonStyle.w80,
						commonStyle.h100,
						commonStyle.flexCenter,
						{
							position: 'absolute',
							right: 0,
							backgroundColor: '#f8f8f8'
							// borderBottomColor: '#ccc',
							// borderBottomWidth: 1
						}
					]}
					onPress={this.onSearch.bind(this)}
				>
					<Iconfont name="search_line" style={[commonStyle.f50]} />
				</TouchableOpacity>
			</View>
		)
	}
}

export default connect(
	state => ({
		list: state.article.typeList
	}),
	dispatch => ({
		getList: () => dispatch(articleAction.articleCategary()),
		getCanuseDomain: () => dispatch(articleAction.getCanuseDomain())
	})
)(TabCom)
